<script setup lang="ts">
import { ref, watchEffect } from "vue"
import ScrollComponent from "./ScrollComponent.vue"
import { useRouter } from "vue-router"
const router = useRouter()
// 这里可以添加一些404页面的逻辑，比如统计页面访问量等
const goPath = () => {
  router.push("/a")
}
const options = [
  {
    title: "教育行业",
    url: "../../src/assets/cardbg1.png",
    isHovered: false, // 初始化时添加 isHovered 属性并设为 false
  },
  {
    title: "3C数码",
    url: "../../src/assets/cardbg2.png",
    isHovered: false,
  },
  {
    title: "金融行业",
    url: "../../src/assets/cardbg3.png",
    isHovered: false,
  },
  {
    title: "APP应用",
    url: "../../src/assets/cardbg4.png",
    isHovered: false,
  },
  {
    title: "时尚家居",
    url: "../../src/assets/cardbg5.png",
    isHovered: false,
  },
  {
    title: "美妆个护",
    url: "../../src/assets/cardbg6.png",
    isHovered: false,
  },
  {
    title: "服装行业",
    url: "../../src/assets/cardbg7.png",
    isHovered: false,
  },
  {
    title: "游戏行业",
    url: "../../src/assets/cardbg8.png",
    isHovered: false,
  },
  {
    title: "旅游行业",
    url: "../../src/assets/cardbg9.png",
    isHovered: false,
  },
  {
    title: "箱包首饰",
    url: "../../src/assets/cardbg10.png",
    isHovered: false,
  },
  {
    title: "玩具行业",
    url: "../../src/assets/cardbg11.png",
    isHovered: false,
  },
  {
    title: "宠物用品",
    url: "../../src/assets/cardbg12.png",
    isHovered: false,
  },
  {
    title: "网服行业",
    url: "../../src/assets/cardbg13.png",
    isHovered: false,
  },
  {
    title: "汽车配件",
    url: "../../src/assets/cardbg14.png",
    isHovered: false,
  },
  {
    title: "机械设备",
    url: "../../src/assets/cardbg15.png",
    isHovered: false,
  },
  {
    title: "照明行业",
    url: "../../src/assets/cardbg16.png",
    isHovered: false,
  },
  {
    title: "五金电器",
    url: "../../src/assets/cardbg17.png",
    isHovered: false,
  },
  {
    title: "其他行业",
    url: "../../src/assets/cardbg18.png",
    isHovered: false,
  },
]

const handleMouseEnter = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  target.classList.add("is-hovered")
}

const handleMouseLeave = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  target.classList.remove("is-hovered")
}
</script>

<template>
  <div class="case">
    <h1>{{ $t(`case.用户案例 用户故事 多方案助力`) }}</h1>
    <div class="scroll-time">
      <!-- 假设 ScrollComponent 内容已定义 -->
      <ScrollComponent />
    </div>
    <div class="grid">
      <div
        class="grid-item"
        v-for="(item, index) in options"
        :key="index"
        @click="goPath"
        @mouseenter="handleMouseEnter($event)"
        @mouseleave="handleMouseLeave($event)"
      >
        <div class="image-container">
          <img :src="item.url" alt="" />
          <div class="gradient-overlay"></div>
        </div>
        <p>{{ $t(`case.${item.title}`) }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.case {
  height: 1492px;
  background: url("https://lanhu-oss-2537-2.lanhuapp.com/SketchPng03173617fd7a0ed682e2fa8da3cb6652643e74b49a87ca6ae269f14cb06d787e?noCache=true")
    no-repeat;
  background-size: 100% 100%;
  padding-top: 90px;
}

h1 {
  width: 402px;
  height: 40px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28px;
  color: #27272f;
  line-height: 40px;
  text-align: center;
  font-style: normal;
  margin: 0 auto;
}

.scroll-time {
  margin-top: 74px;
  height: 660px;
}

.grid {
  width: 1168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 20px;
  padding-top: 110px;
}

.grid-item {
  width: 178px;
  height: 114.8px;
  text-align: center;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(50, 37, 71, 0.54) 0%,
    rgba(0, 0, 0, 0.54) 100%
  );
}

.grid-item p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 114.8px;
  z-index: 10;
  text-align: center;
  font-style: normal;
}

/* 鼠标悬停效果 */
.grid-item.is-hovered {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.grid-item.is-hovered.gradient-overlay {
  background: linear-gradient(
    180deg,
    rgba(50, 37, 71, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}
</style>
